忙碌一整天，專案進程超頭痛...
不知道是被SA卡還是後端卡，總之...茫然無措

今天來說說table的paginator
Paginator其實本身也可以獨立呼喚出來，
但這邊用的是Datatable的paginator 的api
先來上基礎用法

<DataTable
    value={tabledata}
    paginator
    rows={2}
    paginatorTemplate="RowsPerPageDropdown CurrentPageReport  FirstPageLink PrevPageLink JumpToPageInput NextPageLink LastPageLink"
    currentPageReportTemplate="{currentPage} / {totalPages} 頁 共 {totalRecords} 筆"
    rowsPerPageOptions={[2, 4]}
>
    <Column field="code" header="產品編號"></Column>
    <Column field="name" header="產品名稱"></Column>
    <Column field="category" header="產品類別"></Column>
    <Column field="quantity" header="數量"></Column>
</DataTable>

其實光呼叫 paginator 跟設定 rows(每頁顯示幾筆資料) 其實就可以有簡單 paginator，
而這邊是我私心喜歡添加的樣式
rowsPerPageOptions 這是下拉選單決定每筆要顯示多少資料的選項設定
currentPageReportTemplate 客製顯示當前資料顯示的狀況
paginatorTemplate 客製調整paginator順序跟樣式
根據官方文件有以下樣式
FirstPageLink //第一頁按鈕
PrevPageLink //上一頁按鈕
PageLinks //設定跳頁連接 就是會顯示 1 2 3 4...的按鈕的部分
JumpToPageInput//輸入直接跳到第幾頁
NextPageLink //下一頁按鈕
LastPageLink //最後一頁按鈕
RowsPerPageDropdown //下拉選單選擇一頁顯示幾筆
CurrentPageReport //當前資料顯示的狀況

那麼說完基礎用法，來點花式用法
因為使用TS所以要借一點paginator的type用用

import { PaginatorRowsPerPageDropdownOptions } from 'primereact/paginator'

再來宣告一下當前頁數的state

const [perpage, setPerpage] = useState<number>(2);

再來開始魔改
我想要每頁幾筆的下拉選單魔改成input

<DataTable
    value={tabledata}
    paginator
    rows={perpage || 1}
    currentPageReportTemplate="{currentPage} / {totalPages} 頁 共 {totalRecords} 筆"
    paginatorTemplate={{
        layout: "RowsPerPageDropdown CurrentPageReport  FirstPageLink PrevPageLink JumpToPageInput NextPageLink LastPageLink",
        RowsPerPageDropdown: (option: PaginatorRowsPerPageDropdownOptions) => (
            <div>
                <InputText
                    style={{ width: '40px' }}
                    value={perpage.toString()}
                    onChange={(e: any) => { 
                    if(!e.target.value||Number(e.target.value)>0){
                        setPerpage(e.target.value);}
                    }}
                    onKeyDown={(e: any) => {
                        if (e.keyCode == 13) {
                            let value: any = { 
                                label: e.target.value, 
                                value: Number(e.target.value) 
                             };
                            option.onChange(value);
                        }}
                    }/>
            </div>
        )
    }}
>
    <Column field="code" header="產品編號"></Column>
    <Column field="name" header="產品名稱"></Column>
    <Column field="category" header="產品類別"></Column>
    <Column field="quantity" header="數量"></Column>
</DataTable>

其實最困難的點是option.onChange
我打onChange={option.onChange}嗯...報錯...
怎麼辦呢...
只好假扮...select option...?
還真的可以...

再來我想enter時，再切換顯示頁數
所以用了onkeyDown
再來在切換時在刪除時會顯示 NaN/Infinity
所以特別在rows 修改rows={perpage || 1}

好了~~今天就到這先上全code

import React, { useEffect, useState } from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { ProductService } from '../service/table';
import { Product } from '../interfaces/table';
import { InputText } from 'primereact/inputtext';
import { PaginatorRowsPerPageDropdownOptions } from 'primereact/paginator';
const Tables3Compnent: React.FC = () => {
  let service = new ProductService();
  const [tabledata, setTabledata] = useState<Product[]>();
  const [perpage, setPerpage] = useState<number>(2);
  useEffect(() => {
    service.getProductsMini().then(data => setTabledata(data));
  }, []);
  return (
    <div>
      <div className="mt-3">
        <DataTable
          value={tabledata}
          paginator
          rows={2}
          paginatorTemplate="RowsPerPageDropdown CurrentPageReport FirstPageLink PrevPageLink JumpToPageInput NextPageLink LastPageLink"
          currentPageReportTemplate="{currentPage} / {totalPages} 頁 共 {totalRecords} 筆"
          rowsPerPageOptions={[2, 4]}
        >
          <Column field="code" header="產品編號"></Column>
          <Column field="name" header="產品名稱"></Column>
          <Column field="category" header="產品類別"></Column>
          <Column field="quantity" header="數量"></Column>
        </DataTable>
      </div>
      <div className="mt-3">
        <DataTable
          value={tabledata}
          paginator
          rows={perpage || 1}
          currentPageReportTemplate="{currentPage} / {totalPages} 頁 共 {totalRecords} 筆"
          paginatorTemplate={{
            layout: "RowsPerPageDropdown CurrentPageReport  FirstPageLink PrevPageLink JumpToPageInput NextPageLink LastPageLink",
            RowsPerPageDropdown: (option: PaginatorRowsPerPageDropdownOptions) => (
              <div>
                <InputText
                  style={{ width: '40px' }}
                  value={perpage.toString()}
                  onChange={(e: any) => { if (!e.target.value || Number(e.target.value) > 0) setPerpage(e.target.value); }}
                  onKeyDown={(e: any) => {
                    if (e.keyCode == 13) {
                      let value: any = { label: e.target.value, value: Number(e.target.value) };
                      option.onChange(value);
                    }
                  }
                  } />
              </div>
            )
          }}
        >
          <Column field="code" header="產品編號"></Column>
          <Column field="name" header="產品名稱"></Column>
          <Column field="category" header="產品類別"></Column>
          <Column field="quantity" header="數量"></Column>
        </DataTable>
      </div>
    </div>
  );
}
export default Tables3Compnent;

結束~~明天見!